<template>
  <div class="chat-input">
    <div class="input-tools">
      <button class="emoji-btn">😊</button>
      <button class="file-btn">📁</button>
      <button class="voice-btn">🎤</button>
      <button class="screenshot-btn">📸</button>
    </div>
    <div
      ref="inputArea"
      class="input-area"
      contenteditable="true"
      @keydown.enter.prevent="sendMessage"
    />
  </div>
</template>

<script setup>
import { defineEmits, defineProps, ref } from "vue";

const inputArea = ref();

const emit = defineEmits(["sendMessage"]);

const sendMessage = () => {
  const message = inputArea.value.innerText;
  inputArea.value.innerText = "";
  emit("sendMessage", message);
};
</script>

<style scoped lang="scss">
.chat-input {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  background: linear-gradient(135deg, #fff, #f5f5f5);
  border-radius: 10px;
  box-shadow: 0 -2px 20px rgb(168 168 168 / 10%);
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #fafafa;
  }

  .input-tools {
    display: flex;
    gap: 10px;
    align-items: center;

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      font-size: 20px;
      cursor: pointer;
      background: none;
      border: none;
      border-radius: 50%;
      transition:
        background-color 0.3s,
        box-shadow 0.3s;

      &:hover {
        background-color: rgb(224 224 224 / 80%);
        box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
      }

      &:active {
        background-color: rgb(200 200 200 / 90%);
        box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
      }
    }
  }

  .input-area {
    flex: 1;
    min-height: 120px;
    max-height: 150px;
    padding: 10px;
    overflow-y: auto;
    font-size: 16px;
    word-wrap: break-word;
    white-space: pre-wrap;

    /** 光标颜色 */
    caret-color: #007bff;
    border-radius: 8px;
    outline: none;

    /** 优化滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgb(0 0 0 / 20%);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
}
</style>
